// Search List View
// This displays the search results
Ext.define("BioGene.view.SearchListView", {
	extend: 'Ext.Panel',
	alias: 'widget.searchlistview',
	config: {
		id: 'searchListView',
		layout: 'fit',
		type: 'vbox',
		scrollable: false
	},
    initialize: function () {

        var backButton = new Ext.Button({
            text: 'Search',
            ui: 'back',
            handler: this.onCloseTap,
            scope: this
        });
        
        var topToolbar = new Ext.Toolbar({
            title: 'Genes',
            docked: 'top',
            items: [
            	//{ xtype: 'spacer' },
                backButton
            ]
        });
        
        var nextButton = new Ext.Button({
    		iconCls: 'arrow_right',
            iconMask: true,
    		id: 'nextSearchButton',
    		hidden: true,
    		handler: function () {
            	
    		}
        });
        
        var prevButton = new Ext.Button({
    		iconCls: 'arrow_left',
            iconMask: true,
    		id: 'prevSearchButton',
    		hidden: true,
    		handler: function () {
    		
    		}
        });
        
        var pagingBar = new Ext.Toolbar({
        	title: 'not loaded',
        	docked: 'top',
        	id: 'pagingSearchBar',
        	ui: 'neutral',
        	items: [
            	prevButton,
            	{ xtype: 'spacer' },
				nextButton
            ]
        });
        
        var dataList = new Ext.List({
        	id: "dataList",
        	disableSelection: true,
        	store: Ext.getStore("GeneStore"),
        	listeners:{
      			itemtap: function(view, index, item, e){
      				this.fireEvent("loadGene", view.getStore().getAt(index).data, 'search');
       	 		}
			},
        	onItemDisclosure: function(record, btn, index) {
        		this.fireEvent("loadGene", record.data, 'search');
            },
        	itemTpl: '<tpl for="."><div class="resultRow"><b>{gene_symbol}</b> ({gene_organism})<br /><small><span style="color:#505050">{gene_description}</span></small></div></tpl>',
        	scrollable: true
        });

        this.add([topToolbar, pagingBar, dataList]);
    },

    onCloseTap: function () {
		this.fireEvent("indexReturn", this);
    }
    
});